<template>
  <li class="tools">
    <a href="#">工具箱</a>
    <img src="../../../../assets/icon/arrowDown.svg" alt="" />
    <div class="hidden">
      <div class="dropdown-content">
        <!-- <span @click="cancel(map)">取消测量</span> -->
        <span @click="clearDrawContent(map)">清除绘制</span>
        <span @click="measureDistance">测量距离</span>
        <span @click="measureArea">测量面积</span>
        <span @click="saveImg">导出图片</span>
        <span @click="geoscopyDistance">测地学测距离</span>
        <span @click="geoscopyArea">测地学测面积</span>
      </div>
    </div>
  </li>
</template>

<script setup>
import { measureTool, clearDrawContent } from './Hooks/useTools'

let map = ref(null)

onMounted(() => {
  map.value = useGlobalMap()
})

// 测距
function measureDistance() {
  measureTool(map.value, 'line', true)
}
// 测面积
function measureArea() {
  measureTool(map.value, 'area', true)
}
// 测地学测距离
function geoscopyDistance() {
  measureTool(map.value, 'line', false)
}
// 测地学测面积
function geoscopyArea() {
  measureTool(map.value, 'area', false)
}

// 点击保存图片
function saveImg() {
  map.value.once('postcompose', function (event) {
    const canvas = event.context.canvas
    canvas.toBlob(function (blob) {
      saveAs(blob, 'map.png')
    })
  })
  map.value.renderSync()
}
</script>

<style lang="less" scoped>
.tools {
  position: relative;
  padding-top: 5px;
  a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
  }
  img {
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .hidden {
    display: none;
    .dropdown-content {
      position: absolute;
      top: 100%;
      right: -8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100px;
      padding: 0 5px;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.7) 60%,
        rgba(255, 255, 255, 1) 100%
      );
      border-radius: 20px 20px 5px 5px;
      span {
        width: 100%;
        padding: 5px;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
        &:first-child {
          margin-top: 15px;
        }
        &:hover {
          background-color: rgba(0, 255, 255, 0.2);
        }
      }
    }
  }
}

.tools:hover .arrow-down {
  transform: rotate(0);
}

.tools:hover .hidden {
  display: block;
}

.hidden:hover {
  display: block;
}

.tools:hover img {
  transform: rotate(0);
}

// 提示框的样式信息
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}
</style>
